<template>
  <div class="infusion-alarm">
    <aside class="left-side">
      <div style="background: #fff; color: #619dfb" @click="handleDuringInfusion">
        <span>输液中</span><span>({{ infusionNowNum }})</span>
      </div>
      <div style="background: #fff; color: #619dfb" @click="handleInfusionEndSoon">
        <span>输液即将结束</span><span>({{ transfusionDrawRToCloseNum }})</span>
      </div>
      <div style="background: #fff; color: #619dfb" @click="handleEndInfusion">
        <span>输液结束</span><span>({{ infusionEndNum }})</span>
      </div>
      <div style="background: #fff; color: #619dfb" @click="getInfusionIndexData">
        <span>显示所有床位</span>
      </div>
      <!-- <div style="background: #ffeeef; color: #ff0e0e" @click="handleNormalElectricity">
        <span>常规电量</span><span>({{ conventionPowerNum }})</span>
      </div>
      <div style="background: #ffeeef; color: #ff0e0e" @click="handleElecPercent10">
        <span>低电量10%</span><span>({{ slowPowerTenNum }})</span>
      </div>
      <div style="background: #ffeeef; color: #ff0e0e" @click="handleElecPercent20">
        <span>低电量20%</span><span>({{ slowPowerTwentyNum }})</span>
      </div> -->
    </aside>
    <section class="right-side">
      <div class="infusion-show-container">
        <InfusionCard
          v-for="(item, i) in patientInfusionData"
          :key="i"
          :info="item.list"
        />
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="currentPage"
          :page-size="12"
          size="small"
          layout="total, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @current-change="handleCurrentChange"
        />
      </div>
    </section>
  </div>
</template>

<script setup>
import InfusionCard from "./component/infusionCard.vue";
import { query_stateType, get_infusionIndexData } from "@/apis/infusion.js";
import { ref } from "vue";
let currentPage = ref(1); //当前页码
let total = ref(0); //总条数

//输液数据
let patientInfusionData = ref([
  {
    list: [
      {
        battery: 0,
        batteryType: 0,
        bedNo: "",
        bottleType: 1,
        count: "",
        createTime: "",
        deptCode: "",
        deptName: "",
        diTime: "",
        frameType: "",
        hardVersion: "",
        logicalProcessing: true,
        margin: "",
        marginType: null,
        mask: "",
        platformVersion: "",
        ptnName: "",
        ptnSex: "",
        residueTime: null,
        softVersion: "",
        status: "",
        uid: "",
        version: "",
        weight: 0,
      },
    ],
  },
]);

let infusionNowNum = ref(0); //输液中设备数
let transfusionDrawRToCloseNum = ref(0); //输液即将结束设备数
let infusionEndNum = ref(0); //输液结束设备数

let conventionPowerNum = ref(0); //常规电量设备数
let slowPowerTwentyNum = ref(0); //低电量20%设备数
let slowPowerTenNum = ref(0); //低电量10%设备数

//查询设备输液中需展示的状态
async function queryStateType() {
  let res = await query_stateType();
  // console.log(res.data);
}
queryStateType();

//查询输液数据
async function getInfusionIndexData() {
  let res = await get_infusionIndexData({
    pageSize: 12,
    pageNum: currentPage.value,
  });
  total.value = res.data.total;
  patientInfusionData.value = res.data.list;

  infusionNowNum.value = filterData(
    patientInfusionData.value,
    "status",
    "infusion_now"
  ).count;
  transfusionDrawRToCloseNum.value = filterData(
    patientInfusionData.value,
    "status",
    "transfusion_draw_to_a_close"
  ).count;
  infusionEndNum.value = filterData(
    patientInfusionData.value,
    "status",
    "infusion_end"
  ).count;
}
getInfusionIndexData();

//输液中
function handleDuringInfusion() {
  patientInfusionData.value = filterData(
    patientInfusionData.value,
    "status",
    "infusion_now"
  ).result;
}

//输液即将结束
function handleInfusionEndSoon() {
  patientInfusionData.value = filterData(
    patientInfusionData.value,
    "status",
    "transfusion_draw_to_a_close"
  ).result;
}

//输液结束
function handleEndInfusion() {
  patientInfusionData.value = filterData(
    patientInfusionData.value,
    "status",
    "infusion_end"
  ).result;
}

// //常规电量
// function handleNormalElectricity() {
//   console.log("常规电量");
// }

// //低电量10%
// function handleElecPercent10() {
//   console.log("低电量10%");
// }

// //低电量20%
// function handleElecPercent20() {
//   console.log("低电量20%");
// }

function handleCurrentChange() {
  getInfusionIndexData();
}

function filterData(data, key, value) {
  let result = []; //输液数据
  let count = 0; //设备数
  data.forEach((item) => {
    if (item.list.length === 1 && item.list[0][key] === value) {
      result.push(item);
      count++;
    }
    if (item.list.length === 2) {
      item.list.forEach((el) => {
        if (el[key] === value) {
          count++;
        }
      });
      let flag = item.list.some((el) => {
        return el[key] === value;
      });
      if (flag) {
        result.push(item);
      }
    }
  });
  return { result, count };
}
</script>

<style lang="scss" scoped>
.infusion-alarm {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left-side {
    flex: 1;
    margin-right: 1vw;
    font-size: 1vw;
    > div {
      border-radius: 5px;
      height: 5vh;
      margin-bottom: 2vh;
      padding: 0 1vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .right-side {
    flex: 7;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    .infusion-show-container {
      flex: 1;
      padding: 1vh 1vw;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1.5vw;
    }
    .pagination {
      padding: 1vh 1vw;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .right-side::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
}
</style>
